import { ref } from 'vue'
import { marked } from 'marked'

export function useMarkdownRenderer() {
  // 定义自定义的渲染器
  const renderer: any = new marked.Renderer()
  console.log('renderer:' + JSON.stringify(renderer))
  // 设置标题的字体大小
  renderer.heading = (headingObj: any) => {
    const text = headingObj.text
    const level = headingObj.depth
    const fontSize = level === 1 ? '32rpx' : '28rpx' // 设置 h1 和 h2 的字体大小
    return `<h${level} style="font-size: ${fontSize}; margin: 10px 0;">${text}</h${level}>`
  }

  // 转换函数
  const renderMarkdown = (text: string) => {
    return marked(text, { renderer })
      .replace(/<ul>/g, '<ul style="list-style-position: outside;padding-left: 30px;">')
      .replace(/<ol>/g, '<ol style="list-style-position: outside;padding-left: 30px;">')
      .replace(/<li>/g, '<li style="text-indent: 0px;padding-left: 0px;">')
      .replace(/<strong>/g, '<strong style="margin: 10px 0 5px 0;">')
  }

  return {
    renderMarkdown
  }
}
